<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document Object Model DOM | 一只老鸟</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/img/rty-docs.ico">
    <script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-145250139-1"></script>
    <script>window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'UA-145250139-1');</script>
    <script>var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?96bef00c01d8ee7ee249abc380b9e5ab";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();</script>
    <meta name="description" content="Welcome to my docs">
    <meta name="keywords" content="jkx,晋凯旋,jkxxmd,vue,js,html,css,英文歌曲,bruno">
    
    <link rel="preload" href="/assets/css/0.styles.eb327ba5.css" as="style"><link rel="preload" href="/assets/js/app.2b0e3d52.js" as="script"><link rel="preload" href="/assets/js/2.87232f21.js" as="script"><link rel="preload" href="/assets/js/38.a9026d97.js" as="script"><link rel="prefetch" href="/assets/js/10.1e2b3af9.js"><link rel="prefetch" href="/assets/js/11.bfd5eea1.js"><link rel="prefetch" href="/assets/js/12.11b2a8d0.js"><link rel="prefetch" href="/assets/js/13.d230b1b6.js"><link rel="prefetch" href="/assets/js/14.8208356f.js"><link rel="prefetch" href="/assets/js/15.badc1e67.js"><link rel="prefetch" href="/assets/js/16.76e6aeba.js"><link rel="prefetch" href="/assets/js/17.ea4ddef2.js"><link rel="prefetch" href="/assets/js/18.e3d36bd1.js"><link rel="prefetch" href="/assets/js/19.aa1bac84.js"><link rel="prefetch" href="/assets/js/20.838765cd.js"><link rel="prefetch" href="/assets/js/21.14466225.js"><link rel="prefetch" href="/assets/js/22.38392bba.js"><link rel="prefetch" href="/assets/js/23.71895fbc.js"><link rel="prefetch" href="/assets/js/24.766c8a49.js"><link rel="prefetch" href="/assets/js/25.6b02ff9f.js"><link rel="prefetch" href="/assets/js/26.ef22337a.js"><link rel="prefetch" href="/assets/js/27.0334ed21.js"><link rel="prefetch" href="/assets/js/28.811fb438.js"><link rel="prefetch" href="/assets/js/29.f687b8ad.js"><link rel="prefetch" href="/assets/js/3.3fc78177.js"><link rel="prefetch" href="/assets/js/30.0eef1a68.js"><link rel="prefetch" href="/assets/js/31.44dad2fc.js"><link rel="prefetch" href="/assets/js/32.959ca33d.js"><link rel="prefetch" href="/assets/js/33.d27370cb.js"><link rel="prefetch" href="/assets/js/34.73319d5f.js"><link rel="prefetch" href="/assets/js/35.09513538.js"><link rel="prefetch" href="/assets/js/36.c77663c8.js"><link rel="prefetch" href="/assets/js/37.89852ede.js"><link rel="prefetch" href="/assets/js/39.2cb07eac.js"><link rel="prefetch" href="/assets/js/4.50419328.js"><link rel="prefetch" href="/assets/js/40.7694c8be.js"><link rel="prefetch" href="/assets/js/41.0b071795.js"><link rel="prefetch" href="/assets/js/42.731a77fd.js"><link rel="prefetch" href="/assets/js/43.e340c04a.js"><link rel="prefetch" href="/assets/js/44.32723933.js"><link rel="prefetch" href="/assets/js/45.fddbc294.js"><link rel="prefetch" href="/assets/js/46.7227ca9a.js"><link rel="prefetch" href="/assets/js/47.e445b894.js"><link rel="prefetch" href="/assets/js/48.22f08eaa.js"><link rel="prefetch" href="/assets/js/49.1ee7be95.js"><link rel="prefetch" href="/assets/js/5.f4c7dd9b.js"><link rel="prefetch" href="/assets/js/50.620525ff.js"><link rel="prefetch" href="/assets/js/51.23ef9c37.js"><link rel="prefetch" href="/assets/js/52.ab599220.js"><link rel="prefetch" href="/assets/js/53.6f0a5a12.js"><link rel="prefetch" href="/assets/js/54.0af9ce80.js"><link rel="prefetch" href="/assets/js/55.9a619ce4.js"><link rel="prefetch" href="/assets/js/56.d3eb58e2.js"><link rel="prefetch" href="/assets/js/57.cec694aa.js"><link rel="prefetch" href="/assets/js/58.215ff512.js"><link rel="prefetch" href="/assets/js/59.67b4a2d9.js"><link rel="prefetch" href="/assets/js/6.35564b30.js"><link rel="prefetch" href="/assets/js/60.10fa328d.js"><link rel="prefetch" href="/assets/js/61.eb384a7b.js"><link rel="prefetch" href="/assets/js/62.21995735.js"><link rel="prefetch" href="/assets/js/63.d3376937.js"><link rel="prefetch" href="/assets/js/64.9dc17e46.js"><link rel="prefetch" href="/assets/js/65.faaf4be5.js"><link rel="prefetch" href="/assets/js/66.82d4fd2e.js"><link rel="prefetch" href="/assets/js/67.766e8bbb.js"><link rel="prefetch" href="/assets/js/68.e00a5e5f.js"><link rel="prefetch" href="/assets/js/69.0f9198d3.js"><link rel="prefetch" href="/assets/js/7.826495ef.js"><link rel="prefetch" href="/assets/js/70.05ef2cdd.js"><link rel="prefetch" href="/assets/js/71.0da0e95b.js"><link rel="prefetch" href="/assets/js/72.fd1cda42.js"><link rel="prefetch" href="/assets/js/73.907aa3c6.js"><link rel="prefetch" href="/assets/js/74.dec02a91.js"><link rel="prefetch" href="/assets/js/75.8610ce53.js"><link rel="prefetch" href="/assets/js/76.db9000c6.js"><link rel="prefetch" href="/assets/js/77.fa0311a2.js"><link rel="prefetch" href="/assets/js/78.33ae2bd0.js"><link rel="prefetch" href="/assets/js/79.879fa638.js"><link rel="prefetch" href="/assets/js/8.7a30ba0c.js"><link rel="prefetch" href="/assets/js/80.898b981f.js"><link rel="prefetch" href="/assets/js/81.b606e1f8.js"><link rel="prefetch" href="/assets/js/82.5006eb1e.js"><link rel="prefetch" href="/assets/js/83.604f41d2.js"><link rel="prefetch" href="/assets/js/84.2e649063.js"><link rel="prefetch" href="/assets/js/85.50f34442.js"><link rel="prefetch" href="/assets/js/86.aee7b865.js"><link rel="prefetch" href="/assets/js/87.9b812977.js"><link rel="prefetch" href="/assets/js/88.52e08a6c.js"><link rel="prefetch" href="/assets/js/9.7b6af510.js">
    <link rel="stylesheet" href="/assets/css/0.styles.eb327ba5.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">一只老鸟</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/components/introduction.html" class="nav-link">
  VUE
</a></div><div class="nav-item"><a href="/english/introduction.html" class="nav-link">
  Javascript
</a></div><div class="nav-item"><a href="/music/introduction.html" class="nav-link">
  Html5
</a></div><div class="nav-item"><a href="/oral/introduction.html" class="nav-link">
  CSS
</a></div> <a href="https://github.com/jgsrty/jgsrty.github.docs" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/components/introduction.html" class="nav-link">
  VUE
</a></div><div class="nav-item"><a href="/english/introduction.html" class="nav-link">
  Javascript
</a></div><div class="nav-item"><a href="/music/introduction.html" class="nav-link">
  Html5
</a></div><div class="nav-item"><a href="/oral/introduction.html" class="nav-link">
  CSS
</a></div> <a href="https://github.com/jgsrty/jgsrty.github.docs" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><a href="/english/introduction.html" class="sidebar-link">导读</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>2019十二月(December)</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/english/2019/2019-December/What Is a Calorie.html" class="sidebar-link">对象：{ }</a></li><li><a href="/english/2019/2019-December/Why Is Water so Important.html" class="sidebar-link">水为何如此重要</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019十一月(November)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019十月(October)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019九月(September)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019八月(August)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019七月(July)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019六月(June)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019年五月(May)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019年四月(April)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019年三月(March)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019年二月(Feburary)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2019年一月(January)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2018年十二月(December)</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>2018年十一月(November)</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/english/2018/2018-November/Seize the Day.html" class="sidebar-link">js组成</a></li><li><a href="/english/2018/2018-November/The Religion of a Doctor.html" class="active sidebar-link">Document Object Model DOM</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/english/2018/2018-November/The Religion of a Doctor.html#文档对象模型" class="sidebar-link">文档对象模型</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/english/2018/2018-November/The Religion of a Doctor.html#绑定鼠标单击事件" class="sidebar-link">绑定鼠标单击事件：</a></li><li class="sidebar-sub-header"><a href="/english/2018/2018-November/The Religion of a Doctor.html#绑定键盘事件" class="sidebar-link">绑定键盘事件：</a></li><li class="sidebar-sub-header"><a href="/english/2018/2018-November/The Religion of a Doctor.html#绑定事件的方式" class="sidebar-link">绑定事件的方式：</a></li></ul></li><li class="sidebar-sub-header"><a href="/english/2018/2018-November/The Religion of a Doctor.html#增删改查" class="sidebar-link">增删改查</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/english/2018/2018-November/The Religion of a Doctor.html#获取" class="sidebar-link">获取</a></li><li class="sidebar-sub-header"><a href="/english/2018/2018-November/The Religion of a Doctor.html#节点-node" class="sidebar-link">节点（node）：</a></li><li class="sidebar-sub-header"><a href="/english/2018/2018-November/The Religion of a Doctor.html#获取子节点" class="sidebar-link">获取子节点：</a></li><li class="sidebar-sub-header"><a href="/english/2018/2018-November/The Religion of a Doctor.html#获取兄弟节点" class="sidebar-link">获取兄弟节点：</a></li><li class="sidebar-sub-header"><a href="/english/2018/2018-November/The Religion of a Doctor.html#对元素进行操作" class="sidebar-link">对元素进行操作：</a></li></ul></li></ul></li><li><a href="/english/2018/2018-November/World Inequality and Complexity 1.html" class="sidebar-link">面向对象</a></li><li><a href="/english/2018/2018-November/World Inequality and Complexity 2.html" class="sidebar-link">js最全面的数组操作合集</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>2018年十月(October)</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="document-object-model-dom"><a href="#document-object-model-dom" class="header-anchor">#</a> Document Object Model DOM</h1> <h2 id="文档对象模型"><a href="#文档对象模型" class="header-anchor">#</a> 文档对象模型</h2> <div class="language- extra-class"><pre><code>1.对html页面进行任意操作。
2.Document文档：
把文档表示整个html文档
3.Object对象：
对象表示把html中的任何部分转化为对象
4. Model模型：
使用模型表示对象之间的关系，方便获取对象。
5.javascript中&lt;script&gt;标签在页面中的位置：
    1、写在标签上（直接在标签上写事件）：
    结构和行为耦合，不利于页面的管理和修改，所以不建议这样写。
    2、放在head中，在页面的上面：
    浏览器加载页面是按照自上而下的顺序加载的，所以代码执行时页
    面没加载，页面没加载dom对象也没加载，dom的对象也没加载就无法获取到
    dom元素。
6.解决办法：通过onload事件，在整个页面加载完之后触发。oncload可以给
img,window绑定。
7.onload事件对应的响应函数将会在页面加载完之后执行，这样
可以确保加载js是dom对象加载完毕。
```
window.onload=function( ){
js代码放里面
}
```
3、放在页面的下面：
html代码加载完了之后，就无法获取到
4、外部链接js文件 ```&lt;script type=&quot;text/javascript&quot; src=&quot;地址&quot;&gt;
&lt;/script&gt;：```
外部链接地址在head标签中 js文件也需要用
window.onload=function(){js代码放里面}
如果链接地址在html页面最下面，就不需要写。
事件：
1、事件是浏览器和窗口发生特定的交互瞬间 JavaScript和html交互是通
过事件实现的，例如鼠标点击、移动。键盘按键
触发按钮弹窗才执行：
2、在使用事件之前必须绑定事件，可以为按钮的对应事件绑定处理函数的
形式绑定事件，事件触发时对应的函数也会被调用。
</code></pre></div><h3 id="绑定鼠标单击事件"><a href="#绑定鼠标单击事件" class="header-anchor">#</a> 绑定鼠标单击事件：</h3> <div class="language- extra-class"><pre><code>1、单击事件 onclick
在标签中写 onclick = &quot; alert('xxxx') &quot;
不在标签中写：id.onclick=function(){执行代码}。
如果连续需要使用引号，外面使用双引号，里面就是单引号，如果
都用双引号会导致代码识别不出来哪个是开始引号和结束引号。
2、双击事件：onbdlclick
ondblclick 双击事件
db-double()双击
3、鼠标滑过：onmouseover;
4、鼠标移出：onmouseout;
5、鼠标移开：onmouseleave
</code></pre></div><h3 id="绑定键盘事件"><a href="#绑定键盘事件" class="header-anchor">#</a> 绑定键盘事件：</h3> <div class="language- extra-class"><pre><code>1、.onkeydown 键盘按下事件触发
2、.onkeypress 键盘按下有数值键时触发
(Ctrl，Ait，Shift，meta)是没有值得键是不触发的。
先触发onkeydown在触发onkeypress
3、.onkeyup 键盘弹起时触发。
</code></pre></div><h3 id="绑定事件的方式"><a href="#绑定事件的方式" class="header-anchor">#</a> 绑定事件的方式：</h3> <div class="language- extra-class"><pre><code>1、 行内绑定：
在html标签中直接 以属性的形式写事件=执行的函数
例如： &lt;button id=&quot;xxx&quot; onclick=&quot;alert( 'x')&quot;&gt;&lt;/button&gt;;
缺点：行为和结构耦合 不利于后期更改代码。多个同样事件只支
持最后一个
2、 动态绑定：
获取的元素Id名.事件=function（ ）{ 执行的代码 }。
例如： id(就是起的名字).onclick=function( ){ 执
行代码 }。 响应函数
缺点 不能解除绑定，有多个同样的事件 只执行第一个
3、 事件监听：
通过addEventListener(&quot;事件&quot;，&quot;函数&quot;，&quot;false&quot; )；add：添
加，event：事件，listen：听， listener：监听器。
第一个参数，字符串形式， 事件名称；
第二个参数，函数function; 不能是匿名函数因为匿名函数开辟的内存地址
不一样，事件函数名相同时，内存地址才一样
第三个参数，布尔值的参数；
true，事件句柄捕获阶段执行
false，默认事件句柄在冒泡阶段执行
addEventListener(&quot;keydown&quot;,function(event){
????????????????
var event=event||window.event;
if(event.keyCole==48){
console.log(event.keyCode)
}
})
可以解除监听 可以解除事件
区别：addEventListener可以绑定多次同一个事件，并且都会执
行,而行内绑定只执行第一个，动态绑定只支持最后一个： 例如 一
个div有2个onclick.
removeListener(&quot;
event&quot;
,函数
名）解除事件监听
1、removeEventListener()和addEventListener要保持一致。
2、回调函数不能用匿名函数
通过document获取元素：
通过document对象调用
</code></pre></div><h2 id="增删改查"><a href="#增删改查" class="header-anchor">#</a> 增删改查</h2> <h3 id="获取"><a href="#获取" class="header-anchor">#</a> 获取</h3> <p>1、通过Id获取：document.getElementById（&quot;id名称&quot;）；
get: 获取
by: 通过
id： 选择器， id是唯一的，可以起名多个id，一个id名称只能在这个
页面用一次。
Element：元素
2、通过标签获取：document.getElementsByTagName(&quot;标签名称&quot;)；
获取到的结果是一个类数组，跟数组很像，但不是数组。有数
组的一些特性，可以查看length，可以循环输出每一项。
3、通过ClassName（类名）获取：
document.getElementsByClassName(&quot;类名&quot;)；
将同类名的所有元素以类数组集合的形式返回。返回的是一个
类数组。
缺点：ie8及以下不兼容
document.querySelectorAll( &quot; &quot; ); 所有的都显示
document.querySelector(&quot; &quot;); 这两项可以解
决ie8以下 ClassName不兼容的问题。
1、document.querySelector只返回匹配的第一个元素，如果没有匹配
项，返回null。
2、document.querySelectorAll返回匹配的元素集合，如果没有匹配
项，返回空的nodelist(节点数组)。
引号中根据类名查找 querySelector(&quot;.类名&quot;)
根据id查找 querySelector(&quot;#id名&quot;)
根据标签查找 querySelector(&quot;标签名称&quot;)
更准确查找 可以用标签/id/类名结合的方式 如：
标签名.类名 标签名#id名
4、通过name获取：document.getElementsByName(&quot;name&quot;)；
Node list 节点列表 返回的是一个类数组， 输出元素属
性 用对象.属性输出对应的属性值。
要是想获取它的类名 标签属性.class不行 返回undefined. 得
用类型获取方法 .getElementsByClassName来获取
获取或更改html内容：
元素名.innerHTML 获取元素所有的内容
标签也获取
元素名.innerHTML=“新内容” 更改元素所有的内容
元素名.innerText 获取元素中的文本内
容 不获取标签
元素名.innerText=：
“新内容” 更改元素中的文本内容</p> <h3 id="节点-node"><a href="#节点-node" class="header-anchor">#</a> 节点（node）：</h3> <p>节点是构成网页最基本的组成部分、基本单元。
nodetype返回的 值
元素节点的 nodeName 是标签名称 元素element ==1
属性节点的 nodeName 是属性名称 属性attr ==2
文本节点的 nodeName 永远是 #text 元素类型 ==节点类
型文本text ==3
文档节点的 nodeName 永远是 #document 文档document == 9
注释comments ==》8
节点分类：
文档节点：整个html文档
元素节点：html文档中的html标签 nodeType 查看节
点类型
属性节点：标签/元素属性
文本节点：html标签中的文本内容
dom.getAttribute(&quot;属性&quot;)获取元素指定的自定义属性||标准属
性 返回的是一个字符串
dom.setAttribute(&quot;属性&quot;，&quot;属性值&quot;) 修改元素指定的自定义
属性||标准属性
dom.getAttribute('自定义属性')只能获取 自定义属性和标准属
性 style里面的全部
dom.setAttribute('style',&quot;background:#333&quot;)
只能获取行内的样式 通过获取元素的style属性来查看css样
式
dom.getAttributeNode返回指定 （属性名+属性值）
dom.attributes 返回属性集合
getComputedStyle(dom).属性 （ie8以上）
默认 ，行内，外部文件，style标签中的 优先级跟css优先级一
样
dom.currentStyle.属性 （ie8及以下）
dom.style.cssText=&quot;css文本&quot; 设置样式
dom.style.cssText=&quot;background:<strong>;font-size:</strong>&quot;
浏览器已经为我们提供文档节点对象，这个对象就是window属性
可以在页面中直接使用，这个文档节点代表这个网页。</p> <h3 id="获取子节点"><a href="#获取子节点" class="header-anchor">#</a> 获取子节点：</h3> <p>1、通过逐级获取元素的方式：
document.getElementById(&quot;id
名&quot;).getElementsByTagName(&quot;标签名&quot;);
2、.childNodes : 获取所有的子节点，包括空格和回车；
返回的是类数组：
第一项 childNodes[0];
第二项 childNodes[1].........以此类推；
3、.children : 所 有 的 子 元 素
获取到子元素的节点，只包括元素（标签），不包括其他文
本，或者空格及回车，
返回的时类数组。
4、.firstChild : 内 容（空 格、回
车、字 符、标 签） 颜色的是区
别
返回标签下面第一个子节点，包括空格、回车、字符、标
签间的空袭。
5、.firstElementChild : 只 返 回 标 签 内
容
返回的是标签下面的第一个子元素节点（第一个标签）。
6、.lastChild : 内 容（空 格、回
车、字 符、标 签） 颜色的是区
别
返回标签下面最后一个子节点，包括空格、回车、字符、
标签间的空袭。
7、.lastElementChild : 只 返 回 标 签 内 容
返回的是标签下面的最后一个子元素节点（最后一个标
签）。
8、.parentNode : 获取元素上一级父亲节点
9、.parentElement : 获取元素上一级父亲节点 不同的
是.parentElement是ie的标准。</p> <h3 id="获取兄弟节点"><a href="#获取兄弟节点" class="header-anchor">#</a> 获取兄弟节点：</h3> <p>1、.previousSibling 上一个兄弟节点；包
括 回车 空格 文本 标签。
2、.previousElementSibling 上一个兄弟元素节点只有元
素。
3、.nextSibling 下一个兄弟
节点；包括 回车 空格 文本 标签。
4、.nextElementSibling 下一个兄弟元素节点只有元
素。</p> <h3 id="对元素进行操作"><a href="#对元素进行操作" class="header-anchor">#</a> 对元素进行操作：</h3> <p>1、.createElement（&quot;标签&quot;）; 创建元素
需要一个标签名作为参数传进去，以字符串的形式 &quot; div
&quot; ;
例如： var xxx=document.createElement(&quot;div&quot;)。
2、.createTextNode(&quot;文档内容&quot;)。 创建文本节点 回
车 空格 字符 标签
需要一个文本内容作为参数，会将文本结果作为返回值返
回。
3、父节点.appendChild( 节点名) 追加节点||移动节点
在后面添加一个节点 包括文本节点和元素节点
向一个父节点，添加子节点
4、父节点.insertBefore( 新节点，旧节点 ) 指定子节点
前或中间插入子节点
第一个参数是要插入的新节点
第二个参数是指定的旧节点
5、父节点.replaceChild(新节点，旧节点) 替换节点
第一个参数是新节点
第二个参数是替换哪个旧节点
6、父节点.removeChild( ) 删
除节点
当不知道父级的时候 删除的节
点.parentNode.removeChild(删除的节点)。
当removeChild报错的时候后 一方面 不存在的时候报错 另
一方面不是子节点的时候报错
自己.remove()自己删除自己
7、（要克隆的）.cloneNode（true/false） 克
隆：生成一个副本
true是包含里面所有的子孙节点 false只克隆当前这个节
点。</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/jgsrty/jgsrty.github.docs/edit/master/docs/english/2018/2018-November/The Religion of a Doctor.md" target="_blank" rel="noopener noreferrer">Edit this page</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">12/23/2020, 4:59:13 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/english/2018/2018-November/Seize the Day.html" class="prev">
        js组成
      </a></span> <span class="next"><a href="/english/2018/2018-November/World Inequality and Complexity 1.html">
        面向对象
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.2b0e3d52.js" defer></script><script src="/assets/js/2.87232f21.js" defer></script><script src="/assets/js/38.a9026d97.js" defer></script>
  </body>
</html>
